<template>
	<div class="view" :class="{ 'showView': title }">
		<h2>{{ computedTitle }}</h2>
		<button @click="restoreViewedVideos">Сбросить просмотренные видео</button>
		<div v-for="(video, idx) in videos" :key="idx">
			<div class="video" :class="{ 'hide': index > idx }">
				<div class="videoTitle">
					<h3>Урок № {{ idx + 1 }}</h3>
					<button @click="markAsViewed(idx)">Отметить просмотренным</button>
				</div>
				
				<video controls>
					<source :src="video.src">
				</video>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, defineProps, computed, watch } from 'vue'

const props = defineProps({
	videos: Array,
	title: String,
})

const index = ref('')

const markAsViewed = idx => {
	index.value = idx + 1
	localStorage.setItem(props.title, idx + 1)
}

const restoreViewedVideos = () => {
	index.value = ''
	localStorage.removeItem(props.title)
}

const computedTitle = computed(() => {
	return props.title ? props.title.toUpperCase() : ''
})

watch(() => props.title, value => {
	if(value) {
		index.value = localStorage.getItem(value)
	}
})
</script>

<style lang="scss" scoped>
.view {
	border-top: 4px solid #000000;
	width: 80%;
	margin: 0 auto;

	h2 {
		font-size: 40px;
		text-align: center;
		margin-top: 20px;
	}

	button {
		display: block;
		margin: 20px auto 0 auto;
		font-size: 16px;
		background: tomato;
		border: none;
		outline: none;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 4px;
		color: #ffffff;
		cursor: pointer;
	}

	.video {
		width: 100%;
		margin: 20px 0;

		.videoTitle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10px;

			h3 {
				font-size: 18px;
			}

			button {
				margin: 0;
			}
		}

		video {
			width: 100%;
			border: 4px solid #000000;
			border-radius: 4px;
		}
	}
}
</style>